<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Equipment Config</title>
	<link rel="stylesheet" href="../js/easyui/themes/bootstrap/easyui.css">
	<link rel="stylesheet" href="../js/easyui/themes/icon.css">
	<link rel="stylesheet" href="../css/index-ui.css" />
	<script type="text/javascript" src="../js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/ams.util.js"></script>
	<script type="text/javascript" src="../js/webapi.js"></script>
</head>

<body onload="page_init()">
<div class="easyui-tabs" style="width:100%;height:100%" data-options="tabWidth:135">
	<div title="Equipment" style="padding:2px">
		<div style="float:left;padding:5px">
			<a class="easyui-linkbutton" style="width:120px" iconCls="icon-search" onclick="on_query_stat_eq()">Query</a>
		</div>
		<div style="height:93%">
			<table id="table_stat_eq" class="easyui-datagrid" title="" style="width:100%;height:100%" pagination="false"
					data-options="singleSelect:'true',loadMsg:'Loading Data ......'">
				<thead>
					<tr>
						<th data-options="field:'name', width:140">Item Name</th>
						<th data-options="field:'value', width:140">Value</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>

	<div title="Daily" style="padding:2px">
		<div id="div_daily_filter" style="padding:5px">
			<div style="float:left;padding:2px">
				<div style="float:left;padding-top:6px;padding-right:10px"><label> Date Filter: </label></div>
				<input id="filter_start_date_daily" class="easyui-datebox" style="width:115px">
				<label> --- </label>
				<input id="filter_end_date_daily" class="easyui-datebox" style="width:115px">
			</div>
			<div style="float:left;padding-left:30px">
				<a class="easyui-linkbutton" style="width:100px" iconCls="icon-search" onclick="on_query_stat_daily()">Query</a>
			</div>
		</div>
		<div style="height:93%;padding:2px">
			<table id="table_stat_daily" class="easyui-datagrid" title="" style="width:100%;height:100%" pagination="false"
					data-options="singleSelect:'true',loadMsg:'Loading Data ......'">
				<thead>
					<tr>
						<th data-options="field:'name', width:140">Item Name</th>
						<th data-options="field:'unit', width:140">Unit</th>
						<th data-options="field:'value', width:140">Value</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>

	<div title="EPT" style="padding:2px">
		<div id="div_ept_filter" style="padding:5px">
			<div style="float:left;padding:2px">
				<div style="float:left;padding-top:6px;padding-right:10px"><label> Date Filter: </label></div>
				<input id="filter_start_date_ept" class="easyui-datebox" style="width:115px">
				<label> --- </label>
				<input id="filter_end_date_ept" class="easyui-datebox" style="width:115px">
			</div>
			<div style="float:left;padding-left:30px">
				<a class="easyui-linkbutton" style="width:100px" iconCls="icon-search" onclick="on_query_stat_ept()">Query</a>
			</div>
		</div>
		<div style="height:93%;padding:2px">
			<table id="table_stat_ept" class="easyui-datagrid" title="" style="width:100%;height:100%" pagination="false"
					data-options="singleSelect:'true',loadMsg:'Loading Data ......'">
				<thead>
					<tr>
						<th data-options="field:'name', width:140">Item Name</th>
						<th data-options="field:'idle', width:140">Idle</th>
						<th data-options="field:'busy', width:140">Busy</th>
						<th data-options="field:'blocked', width:140">Blocked</th>
						<th data-options="field:'percent', width:400, formatter:tbl_ept_formatter_percent">Percentage</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>

	<div title="Alarm" style="padding:2px">
		<div id="div_alarm_filter" style="padding:5px">
			<div style="float:left;padding:2px">
				<div style="float:left;padding-top:6px;padding-right:10px"><label> Date Filter: </label></div>
				<input id="filter_start_date_alarm" class="easyui-datebox" style="width:115px">
				<label> --- </label>
				<input id="filter_end_date_alarm" class="easyui-datebox" style="width:115px">
			</div>
			<div style="float:left;padding-left:30px">
				<a class="easyui-linkbutton" style="width:100px" iconCls="icon-search" onclick="on_query_stat_alarm()">Query</a>
			</div>
		</div>
		<div style="height:93%;padding:2px">
			<table id="table_stat_alarm" class="easyui-datagrid" title="" style="width:100%;height:100%" pagination="false"
					data-options="singleSelect:'true',loadMsg:'Loading Data ......'">
				<thead>
					<tr>
						<th data-options="field:'percent', width:250, formatter:tbl_alarm_formatter_percent">Percentage</th>
						<th data-options="field:'count', width:60">Count</th>
						<th data-options="field:'case', width:620">Alarm Case</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>

</body>

<script>
var g_eq_name = ""
function page_init()
{
	// init default filter
	var tmpday = new Date()
	var end_day = tmpday.getMonth() + 1 + '/' + tmpday.getDate() + '/' + tmpday.getFullYear()
	tmpday.setDate(tmpday.getDate() - 7)
	var start_day = tmpday.getMonth() + 1 + '/' + tmpday.getDate() + '/' + tmpday.getFullYear()
	g_eq_name = get_page_param('eq')
	
	$('#filter_start_date_daily').datebox('setValue', start_day)
	$('#filter_end_date_daily').datebox('setValue', end_day)

	$('#filter_start_date_ept').datebox('setValue', start_day)
	$('#filter_end_date_ept').datebox('setValue', end_day)

	$('#filter_start_date_alarm').datebox('setValue', start_day)
	$('#filter_end_date_alarm').datebox('setValue', end_day)
}

function on_query_stat_eq()
{
	console.log("on_query_stat_eq")
	if (ams_is_sim_mode()) {
		$.getJSON('stat_eq_01.json', function(json_data) {
			$('#table_stat_eq').datagrid({
				data:json_data.rows
			})
		})
	} else {
		// string getEquipStatistics(string eqName)
			$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: getWebServiceUrl("getEquipStatistics"),
			data:JSON.stringify({
				"eqName":g_eq_name
			}),
			dataType: 'json',
			success: function (json_data) {
				console.log(JSON.parse(json_data.d))
				$('#table_stat_eq').datagrid('loadData',JSON.parse(json_data.d));
				},
			error: function (response) {
				//alert(errorThrown.message);
				//alert('Error: ' + response.responseText)
				$.messager.alert("Error", "Error: " + response.responseText, "error");
			}
		});
	}
}

function on_query_stat_daily()
{
	var start_t = $("#filter_start_date_daily").val()
	var end_t = $("#filter_end_date_daily").val()
	var __param = { 'eqName':g_eq_name, 'startTime':start_t,  'endTime':end_t  }
//	console.log(__param)
	if (ams_is_sim_mode()) {
		$.getJSON('stat_daily_01.json', function(json_data) {
			$('#table_stat_daily').datagrid({
				data:json_data.rows
			})
		})
	} else {
		// string getDailyStatistics(string eqName, string strStartDate, string strEndDate)
		// format: “2018-01-01”
			$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: getWebServiceUrl("getDailyStatistics"),
			data:JSON.stringify({
				"eqName":g_eq_name,
				"strStartDate":$("#filter_start_date_daily").val(),
				"strEndDate":$("#filter_end_date_daily").val()
			}),
			dataType: 'json',
			success: function (json_data) {
				console.log(JSON.parse(json_data.d))
				$('#table_stat_daily').datagrid('loadData',JSON.parse(json_data.d));
				},
			error: function (response) {
				//alert(errorThrown.message);
				//alert('Error: ' + response.responseText)
				$.messager.alert("Error", "Error: " + response.responseText, "error");
			}
		});
	}
}

function __update_ept_rows(rows)
{
	for (var i = 0; i < rows.length; i++) {
	//	console.log(__rows[i]['idle'])
		var pct_idle = parseFloat(rows[i]['idle_pct'])*100
		var pct_busy = parseFloat(rows[i]['busy_pct'])*100
		var pct_blocked = parseFloat(rows[i]['blocked_pct'])*100
		rows[i]['idle'] += ' (' + pct_idle.toFixed(2) + '%)'
		rows[i]['busy'] += ' (' + pct_busy.toFixed(2) + '%)'
		rows[i]['blocked'] += ' (' + pct_blocked.toFixed(2) + '%)'

		if (pct_idle > 0 && pct_idle < 1)
		{
			pct_idle = 1;
		}
		if (pct_busy > 0 && pct_busy < 1)
		{
			pct_busy = 1;
		}
		if (pct_blocked > 0 && pct_blocked < 1)
		{
			pct_blocked = 1;
		}
		rows[i]['percent'] = pct_idle.toFixed(0) + ',' + pct_busy.toFixed(0) + ',' + pct_blocked.toFixed(0)
	}
}

function on_query_stat_ept()
{
	var start_t = $("#filter_start_date_ept").val()
	var end_t = $("#filter_end_date_ept").val()
	var __param = { 'eqName':g_eq_name, 'startTime':start_t,  'endTime':end_t  }
	console.log(__param)
	if (ams_is_sim_mode()) {
		$.getJSON('stat_ept_01.json', function(json_data) {
			// update json_data
			var __rows = json_data['rows']
			__update_ept_rows(__rows)
			$('#table_stat_ept').datagrid({
				data:json_data.rows
			})
		})
	} else {
		// string getEPTStatistics(string eqName, string strStartDate, string strEndDate)
			$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: getWebServiceUrl("getEPTStatistics"),
			data:JSON.stringify({
				"eqName":g_eq_name,
				"strStartDate":$("#filter_start_date_ept").val(),
				"strEndDate":$("#filter_end_date_ept").val()
			}),
			dataType: 'json',
			success: function (json_data) {
				console.log(JSON.parse(json_data.d))
				var __rows = (JSON.parse(json_data.d)['rows'])
				__update_ept_rows(__rows)
				//$('#table_stat_ept').datagrid('loadData',JSON.parse(json_data.d));
				$('#table_stat_ept').datagrid({data:__rows});
				},
			error: function (response) {
				//alert(errorThrown.message);
				//alert('Error: ' + response.responseText)
				$.messager.alert("Error", "Error: " + response.responseText, "error");
			}
		});
	}
}

function tbl_ept_formatter_percent(value)
{
	if (value) {
		percent_array = value.split(',')
		var nTotal = (parseInt(percent_array[0]) + parseInt(percent_array[1]) + parseInt(percent_array[2]));
		if (nTotal > 100)
		{
			var nRemainder = nTotal - 100;
			var nIndex = 0;
			if (parseInt(percent_array[0]) < parseInt(percent_array[1]))
			{
				nIndex = 1;
			}
			if (parseInt(percent_array[nIndex]) < parseInt(percent_array[2]))
			{
				nIndex = 2;
			}
			percent_array[nIndex] = String(parseInt(percent_array[nIndex]) - nRemainder);
		}

		var s = '<div style="width:100%">' +
				'<div style="float:left; width:' + percent_array[0] + '%;background:#000099">' + '&nbsp;' + '</div>' +
				'<div style="float:left; width:' + percent_array[1] + '%;background:#00ccff">' + '&nbsp;' + '</div>' +
				'<div style="float:left; width:' + percent_array[2] + '%;background:#cc0000">' + '&nbsp;' + '</div>' +
				'</div>'
	//	console.log(s)
        return s
	} else {
		return 'N/A';
	}
}

function tbl_alarm_formatter_percent(value)
{
	if (value) {
		percent_array = value.split(',')
		var s = '<div style="float:left;width:75%;background:#00ccff">' +
					 '<div style="float:right; width:' + value + '%;background:#000099">' + '&nbsp;' + '</div>' +
				'</div>' +
				'<div style="width:50px;float:right;text-align:right;color:#000099">' + value + '%</div>'
        return s
	} else {
		return 'N/A';
	}
}

function on_query_stat_alarm()
{
	var start_t = $("#filter_start_date_alarm").val()
	var end_t = $("#filter_end_date_alarm").val()
	var __param = { 'eqName':g_eq_name, 'startTime':start_t,  'endTime':end_t  }
	console.log(__param)
	if (ams_is_sim_mode()) {
		$.getJSON('stat_alarm_01.json', function(json_data) {
		//	console.log(json_data)
			// update json_data
		//	var __rows = json_data['rows']
		//	__update_ept_rows(__rows)
			$('#table_stat_alarm').datagrid({
				data:json_data.rows
			})
		})
	} else {
		// string getAlarmStatistics(string eqName, string strStartDate, string strEndDate)
			$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: getWebServiceUrl("getAlarmStatistics"),
			data:JSON.stringify({
				"eqName":g_eq_name,
				"strStartDate":$("#filter_start_date_alarm").val(),
				"strEndDate":$("#filter_end_date_alarm").val()
			}),
			dataType: 'json',
			success: function (json_data) {
				console.log(JSON.parse(json_data.d))
				$('#table_stat_alarm').datagrid('loadData',JSON.parse(json_data.d));
				},
			error: function (response) {
				//alert(errorThrown.message);
				//alert('Error: ' + response.responseText)
				$.messager.alert("Error", "Error: " + response.responseText, "error");
			}
		});
	}
}

$.fn.datebox.defaults.formatter = function(date){
	var y = date.getFullYear();
	var m = date.getMonth()+1;
	var d = date.getDate();
	return y+'-'+m+'-'+d;
};
$.fn.datebox.defaults.parser = function(s){
	var t = Date.parse(s);
	if (!isNaN(t)){
		return new Date(t);
	} else {
		return new Date();
	}
}
</script>
</html>
